<template>
  <div>
    <el-button @click="showAddCateVisible" type="primary">添加分类</el-button>
    <!-- 视图表格 -->
    <tree-table class="tree-table" style="max-height:450px;overflow-y: auto;" :columns="columns" :data="cateList" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
      <!-- 是否有效 -->
      <template slot="isok" slot-scope="scope">
        <i v-if="!scope.row.cat_deleted" class="el-icon-success"></i>
        <i v-if="scope.row.cat_deleted" class="el-icon-error"></i>
      </template>
      <!-- 排序 -->
      <template slot="order" slot-scope="scope">
        <el-tag :type="scope.row.cat_level|tagType" disable-transitions>{{scope.row.cat_level|levelMseeage}}</el-tag>
      </template>
      <!-- 操作 -->
      <template slot="opt" slot-scope="scope">
        <el-button icon="el-icon-edit" type="primary" @click="showEditVisible(scope.row)" size="mini">编辑</el-button>
        <el-button @click="deleteCate(scope.row)" icon="el-icon-delete" type="danger" size="mini">删除</el-button>
      </template>
    </tree-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="cateTotal">
    </el-pagination>

    <!-- 添加对话框 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="addVisible" @closed="closeAddVisible" width="50%">
      <el-form :model="addForm" :rules="addrules" ref="addFormRef" label-width="80px">
        <el-form-item prop="cat_name" label="商品类型">
          <el-input v-model.trim="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item v-if="cateId===''" label="父级分类">
          <el-cascader v-model="cateSelectList" clearable :options="catePrentList" :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name',checkStrictly:true }" @change="handleChange"></el-cascader>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="postNewCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'cate',
  data() {
    return {
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      cateList: [],
      // 商品所有父级分类
      catePrentList: [],
      // 选中的分类
      cateSelectList: [],
      // 修改时的商品id
      cateId: '',
      // 对话框标题
      title: '',
      cateTotal: 0,
      // 添加对话框
      addVisible: false,
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          minWidth: '200px'
        },
        {
          label: '是否有效',
          type: 'template',
          // 模板名称
          template: 'isok'
        },
        {
          label: '排序',
          type: 'template',
          // 模板名称
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          // 模板名称
          template: 'opt',
          minWidth: '200px'
        }
      ],
      addForm: {
        // 分类名字
        cat_name: '',
        // 父级分类id如果没有父级那就为0
        cat_pid: 0,
        // 分类等级
        cat_level: 0
      },
      addrules: {
        cat_name: [{ required: true, message: '请输入商品类型', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取商品分类
    async getCateList() {
      const { data: res } = await this.$api.goods.getCatesApi(this.queryInfo)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.cateList = res.data.result
      this.cateTotal = res.data.total
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getCateList()
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getCateList()
    },
    // 关闭添加对话框
    closeAddVisible() {
      this.$refs.addFormRef.resetFields()
      this.cateSelectList = []
      this.cateId = ''
      this.addForm.cat_pid = 0
      this.addForm.cat_level = 0
    },
    showAddCateVisible() {
      this.addForm.cat_name = ''
      this.title = '新增分类'
      this.addVisible = true
      this.getPrentsList()
    },
    // 获取父级分类
    async getPrentsList() {
      const { data: res } = await this.$api.goods.getCatesApi({
        type: 2
      })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.catePrentList = res.data
      console.log(this.catePrentList)
    },
    // 选择器发生改变时
    handleChange(value) {
      // 等级正好与返回值的数组长度对应
      this.addForm.cat_pid = 0
      this.addForm.cat_level = value.length
      if (value.length > 0) {
        this.addForm.cat_pid = value[value.length - 1]
      } else {
        this.addForm.cat_pid = 0
        this.addForm.cat_level = value.length
      }
      console.log(this.addForm)
    },
    // 新增分类
    postNewCate() {
      // 提交前校验
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return false
        // 如果存在id那么是修改分类
        if (this.cateId !== '') {
          console.log(this.cateId)
          const { data: res } = await this.$api.goods.putCateApi(this.cateId, this.addForm.cat_name)
          if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
          this.$message.success('编辑商品分类成功')
          this.addVisible = false
          this.getCateList()
          return
        }
        const { data: res } = await this.$api.goods.postCateApi(this.addForm)
        if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
        this.$message.success('添加商品分类成功')
        this.addVisible = false
        this.getCateList()
      })
    },
    // 显示修改分类对话框
    showEditVisible(row) {
      this.title = '修改分类'
      this.cateId = row.cat_id
      this.addForm.cat_name = row.cat_name
      this.addVisible = true
      console.log(row)
      this.getPrentsList()
    },
    // 删除数据
    async deleteCate(row) {
      const confirm = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirm !== 'confirm') return
      const { data: res } = await this.$api.goods.deleteCateApi(row.cat_id)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success('删除成功')
      this.getCateList()
    }
  },
  created() {
    this.getCateList()
  },
  filters: {
    levelMseeage(level) {
      if (level === 0) {
        return '一级'
      } else if (level === 1) {
        return '二级'
      } else if (level === 2) {
        return '三级'
      }
    },
    tagType(level) {
      if (level === 0) {
        return 'primary'
      } else if (level === 1) {
        return 'success'
      } else if (level === 2) {
        return 'warning'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-icon-success {
  color: green;
}
.el-icon-error {
  color: red;
}
.tree-table {
  margin-top: 15px;
}
.el-cascader {
  width: 100%;
}
</style>
